<template>
	<view class='learning'>
		<view class='learning_list'>
			<text style='margin:0 0 10px 10px;display:inline-block;color:#1590EF'>学员学习记录</text>
			<!-- 学习记录 -->
			<view class='learning_list_details' v-for="item in studyList">
				<view class="learning_list_img">
					<image src="/static/study/photo.png" mode="" style='width:100%;height:80rpx'></image>
				</view>
				<view class="learning_list_text">
					<view style='display:block;margin:5px;'>
						<text style='text-align:left;display:inline-block;width:50%;'>{{item.userName}}</text>
						<text
							style='text-align:right;display:inline-block;width:50%;color:#999999;font-size: 26rpx;'>{{item.endTime}}</text>
					</view>
					<text class='learning_time'>学习截止时间：{{item.lastStudyTime}}</text>
					<text class='learning_time'>所属机构：{{item.orgName}}</text>
					<u-line-progress :percentage="item.videoTime==0?0:(item.alreadyTime/item.videoTime)*100"
						:showText="false" height='20' activeColor="#8AC7FD" style='width:70%;display:inline-block'>
					</u-line-progress>
					<text class='learning_time' style='display:inline-block;margin: 0 0 0 6px;'>
						已学习{{item.videoTime==0?0:((item.alreadyTime/item.videoTime)*100).toFixed(0)}}%
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studyList: {}
			};
		},
		mounted() {
			this.search()
		},
		methods: {
			search() {
				// 学员角色
				this.$api.getStudyRecord({
					"current": 1,
					"size": 10,
				}).then(res => {
					this.studyList = res.data.data.records
				})
			}
		},
	}
</script>


<style lang="scss" scoped>
	.learning {
		border-top: 1px #F2F2F2 solid;
		padding: 15px;
		margin: 20px 0 0 0;

		.learning_list {
			padding: 15px 0;
			box-shadow: 4px 4px 6px #f2f2f2;

			.learning_list_details {
				position: relative;
				border-bottom: 1px #F0F1F6 solid;

				.learning_list_img {
					padding: 10px;
					width: 14%;
					display: inline-block;
					position: relative;
					top: 50%;
					transform: translate(0, -25%);
				}

				.learning_list_text {
					padding: 0 10px;
					width: 73%;
					display: inline-block;

					.learning_time {
						display: block;
						margin: 5px;
						font-size: 26rpx;
						color: #666666
					}
				}
			}

		}
	}
</style>
